{{Template:SZPT-CHINA/head}}
<html>

<!-- jquery 公共CSS-->
<script src="https://2021.igem.org/Team:SZPT-CHINA/JS/jQuery&action=raw&ctype=text/javascript"></script>
<link rel="stylesheet" href="https://2021.igem.org/Team:SZPT-CHINA/CSS/Public?action=raw&amp;ctype=text/css">


<script>
    $(document).ready(function () {
        //document.body.append(document.getElementById('loadImg'))
        //滑动
        //加载适配
        init();
        var loadImg = document.getElementById('loadImg'); //选取id为test的元素
        loadImg.style.display = 'block'; // 隐藏选择的元素
    });


    //BEGIN-loading
    var loadhidekey = 0;

    window.onload = function () {
        console.log("页面加载好了", loadhidekey)
        setTimeout(function () {
            //$("#loaderDownId").hide();
            //$("#loadingHome").hide();
            //$("#loading").hide();
        }, 10);
        init();


        setTimeout(function () {

            $("#directory").hide();
            $("#loadingHome").hide();

            document.body.append(document.getElementById('directory'))
            document.body.append(document.getElementById('head'))
            // $("#loading").hide();
        }, 10);




        //


    }

    function animateScroll(element, speed) {
        let rect = element.getBoundingClientRect();
        //获取元素相对窗口的top值，此处应加上窗口本身的偏移
        let top = window.pageYOffset + rect.top - 100;
        let currentTop = 0;
        let requestId;
        //采用requestAnimationFrame，平滑动画
        function step(timestamp) {
            currentTop += speed;
            if (currentTop <= top) {
                window.scrollTo(0, currentTop);
                requestId = window.requestAnimationFrame(step);
            } else {
                window.cancelAnimationFrame(requestId);
            }
        }
        window.requestAnimationFrame(step);
    }



    //设置展开
    $(document).ready(function () {

        if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|Windows Phone/i.test(navigator.userAgent)) {
            // mobilePage();
            designHeight = 3000;
        } else {
            //pc
            designHeight = 980;
        }
        lateHeight = document.documentElement.clientHeight;
        heightRatio = lateHeight / designHeight
        console.log("height:", heightRatio)
        console.log('1')

        document.getElementById("dir1").onclick = function () {
            // window.scrollTo(0, 350*heightRatio/0.713265306122449);
            let target = document.getElementById('content1');
            animateScroll(target, 250);
            $("#directory").show();
        }
        document.getElementById("dir2").onclick = function () {
            //window.scrollTo(0, 3500 * heightRatio / 0.713265306122449);
            let target = document.getElementById('content2');
            animateScroll(target, 250);
        }
        document.getElementById("dir3").onclick = function () {
            //window.scrollTo(0, 4300 * heightRatio / 0.713265306122449);
            let target = document.getElementById('content3');
            animateScroll(target, 250);
        }



    });
    $(window).scroll(function () {

        if ($(this).scrollTop() > 270 * heightRatio / 0.713265306122449) {
            $("#directory").show();
        } else {
            $("#directory").hide();
        }

    });
    // 视频加载好
    // function hideLoad() {
    //     console.log("视频加载好了", loadhidekey)

    //     if (loadhidekey == 1) {
    //         setTimeout(function () {
    //             //$("#loaderDownId").hide();
    //             $("#loadingHome").hide();
    //             //$("#loading").hide();
    //         }, 10);
    //     }
    //     else if (loadhidekey == 0) {
    //         loadhidekey = 1;
    //     }
    // }
    //END-loading
</script>
<!-- jquery -->
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        // $("#m1").hover(
        //     function () {
        //         keyPic()
        //         $("#p1").animate({
        //             height: '700px',
        //             width: '650px'
        //         }, 20);
        //         $("#bg1").attr("style", "background-color: #e2594f;float: left;width: 25%;height: 650px;");

        //     },
        //     function () {
        //         $("#p1").attr("style", "height: 650px;float: left;");
        //         $("#bg1").attr("style", "background-color: #f8c8b2;float: left;width: 25%;height: 650px;");

        //     }
        // )
        //设置默认


        var pNo = "height: 450px;width:450px;float: left;transition: all 0.3s;"
        var bgNo = "background-color: #f8c8b2;float: left;width: 25%;height: 480px;transition: all 0.3s;"
        var p = "height: 480px;width:480px;float: left;	transition: all 0.3s;"
        var bg = "background-color: #e2594f;float: left;width: 25%;height: 480px;transition: all 0.3s;"

        $("#p1").attr("style", pNo);
        $("#bg1").attr("style", bgNo);

        $("#p2").attr("style", p);
        $("#bg2").attr("style", bg);

        $("#p3").attr("style", pNo);
        $("#bg3").attr("style", bgNo);

        $("#p4").attr("style", pNo);
        $("#bg4").attr("style", bgNo);

        $("#m1").mouseover(
            function () {
                $("#p2").attr("style", pNo);
                $("#bg2").attr("style", bgNo);

                $("#p3").attr("style", pNo);
                $("#bg3").attr("style", bgNo);

                $("#p4").attr("style", pNo);
                $("#bg4").attr("style", bgNo);
                //1
                $("#p1").attr("style", p);
                $("#bg1").attr("style", bg);
            },

        ),
            $("#m2").mouseover(
                function () {
                    $("#p1").attr("style", pNo);
                    $("#bg1").attr("style", bgNo);

                    $("#p3").attr("style", pNo);
                    $("#bg3").attr("style", bgNo);

                    $("#p4").attr("style", pNo);
                    $("#bg4").attr("style", bgNo);
                    //2
                    $("#p2").attr("style", p);
                    $("#bg2").attr("style", bg);
                },
            ),
            $("#m3").mouseover(
                function () {
                    $("#p1").attr("style", pNo);
                    $("#bg1").attr("style", bgNo);

                    $("#p2").attr("style", pNo);
                    $("#bg2").attr("style", bgNo);

                    $("#p4").attr("style", pNo);
                    $("#bg4").attr("style", bgNo);
                    //3
                    $("#p3").attr("style", p);
                    $("#bg3").attr("style", bg);
                },
            ),
            $("#m4").mouseover(
                function () {
                    $("#p1").attr("style", pNo);
                    $("#bg1").attr("style", bgNo);

                    $("#p2").attr("style", pNo);
                    $("#bg2").attr("style", bgNo);

                    $("#p3").attr("style", pNo);
                    $("#bg3").attr("style", bgNo);
                    //4
                    $("#p4").attr("style", p);
                    $("#bg4").attr("style", bg);
                },
            )
        $("#m1").click(function () {
            window.location.href = "https://2021.igem.org/Team:SZPT-CHINA/Parts";
        });
        $("#m2").click(function () {
            window.location.href = "https://2021.igem.org/Team:SZPT-CHINA/Contribution";
        });
        $("#m3").click(function () {
            window.location.href = "https://2021.igem.org/Team:SZPT-CHINA/Engineering";
        });
        $("#m4").click(function () {
            window.location.href = "https://2021.igem.org/Team:SZPT-CHINA/Improvement";
        });

    });
</script>
<script>
    $(document).ready(function () {

        $("#dir1").hover(function () {
            var value = document.getElementById('dir1').getAttribute("style")
            value = value.replace(/ffffff/, "fffea4")
            $("#dir1").attr("style", value);
        }, function () {
            var value = document.getElementById('dir1').getAttribute("style")
            value = value.replace(/fffea4/, "ffffff")
            $("#dir1").attr("style", value);
        });

        $("#dir2").hover(function () {
            var value = document.getElementById('dir2').getAttribute("style")
            value = value.replace(/ffffff/, "fffea4")
            $("#dir2").attr("style", value);
        }, function () {
            var value = document.getElementById('dir2').getAttribute("style")
            value = value.replace(/fffea4/, "ffffff")
            $("#dir2").attr("style", value);
        });

        $("#dir3").hover(function () {
            var value = document.getElementById('dir3').getAttribute("style")
            value = value.replace(/ffffff/, "fffea4")
            $("#dir3").attr("style", value);
        }, function () {
            var value = document.getElementById('dir3').getAttribute("style")
            value = value.replace(/fffea4/, "ffffff")
            $("#dir3").attr("style", value);
        });

    });
</script>

<body class="pc" id="main">

    <!-- loading -->
    <div id="loadingHome"
        style=" position: fixed; left: 0px;top: -100px; width: 100%;height: 115%;z-index: 999999999999;background-color: #f8c8b2;">
        <img id="loadImg"
            style=" position: relative; height: 4%;width: auto;left: 0%;margin:0px auto;top: 300px; text-align: center;display: none;"
            src="https://2021.igem.org/wiki/images/6/6f/T--SZPT-CHINA--iconGIF.png"></img>
    </div>

    <div>
        <div class="mainImg">
            <div>
                <div id="bg1" style="background-color: #f8c8b2;float: left;width: 25%;">
                    <image id="p1" src="https://2021.igem.org/wiki/images/8/86/T--SZPT-CHINA--part-overview.png"
                        class="smallImg"></image>
                </div>
                <div id="bg2" style="background-color: #f8c8b2;float: left;width: 25%;">

                    <image id="p2" src="https://2021.igem.org/wiki/images/2/2b/T--SZPT-CHINA--part-contribution.png"
                        class="smallImg"></image>

                </div>
                <div id="bg3" style="background-color: #f8c8b2;float: left;width: 25%;">
                    <image id="p3" src="https://2021.igem.org/wiki/images/d/d9/T--SZPT-CHINA--part-engineering.png"
                        class="smallImg"></image>
                </div>
                <div id="bg4" style="background-color: #f8c8b2;float: left;width: 25%;">
                    <image id="p4" src="https://2021.igem.org/wiki/images/7/75/T--SZPT-CHINA--part-improvement.png"
                        class="smallImg"></image>
                </div>
            </div>
            <div style="z-index: 99;position: absolute;">
                <image src="https://2021.igem.org/wiki/images/9/9f/T--SZPT-CHINA--contribution_font.png"
                    style="margin-top: -50px;margin-left: 445px;"> </image>
            </div>
            <div style="margin-top: 50px;">
                <div id="m1" style="width: 480px;height: 480px;z-index: 9999;position: absolute;float:left;"></div>
                <div id="m2"
                    style="width: 480px;height: 480px;z-index: 9999;position: absolute;float:left;margin-left: 480px;">
                </div>
                <div id="m3"
                    style="width: 480px;height: 480px;z-index: 9999;position: absolute;float:left;margin-left: 960px;">
                </div>
                <div id="m4"
                    style="width: 480px;height: 480px;z-index: 9999;position: absolute;float:left;margin-left: 1440px;">
                </div>
            </div>

        </div>
        <!-- down -->
        <div style="width: 1920px;background-color: #ffffff;">
            <div id="blue" style="float:left; height: 10000px; width: 55px;background-color: #2588d4;">
            </div>
            <div id="directory" style="float:left;margin-top: 8vh;z-index: 990;position: fixed;">
                <div
                    style="margin-top: 9vh;background-color: #dd544d;margin-left: 6vw;border-radius:10px;padding: 1vw;width: 16vw;">
                    <h3 id="dir0p"
                        style="color:#fffea4;margin-left: 10%;font-size:1.8rem;font-family: 'Quicksand', sans-serif;">
                        Contribution</h3>
                    <div style="margin-left: 13%;">
                        <div id="dir1" style="color:#ffffff; transition: all 0.3s;width: auto;height: 9vh;margin-top: 3vh;">
                            <p id="dir1p"
                                style="font-size: 1.2rem;padding-top: 0vh;font-family: 'Quicksand', sans-serif;">
                                Characterization of the Anderson Promoter
                            </p>
                        </div>

                        <div id="dir2" style="color:#ffffff;height:9vh;width: auto;">
                            <p id="dir2p" style="transition: all 0.3s;font-size: 1.2rem;padding-top: 0vh;">
                                Characterization of the pR Promoter
                            </p>
                        </div>

                        <div id="dir3" style="color:#ffffff;width: auto;height: 8vh;">
                            <p id="dir3p" style="transition: all 0.3s;font-size: 1.2rem;padding-top: 0vh;">
                                References</p>
                        </div>


                    </div>
                </div>
            </div>
            <div class="content"
                style="float:left;width: 1173px;margin-left: 397px;margin-top: 100px;padding-left:100px;background-color: #ffffff;text-align: justify;">



                <div class="pb">
                    This year, our team has submitted some new experimental data into existing biobricks. Besides, we
                    also
                    advanced the characterization of a few Anderson promoters, which would be a useful tool to other
                    iGEM
                    teams in the future.
                    <br><br>
                    The parts we used are listed as follows：
                    <br>
                </div>


                <table border="1" style="font-size: 200%;text-align: center;margin-left: 250px;">
                    <tr>
                        <td style="width: 152px;">S/N</td>
                        <td style="width: 190px;">Name</td>
                        <td style="width: 240px;">Biobricks</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>J23100</td>
                        <td><a href="http://parts.igem.org/Part:BBa_J23100">BBa_J23100</a></td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>pR</td>
                        <td><a href="http://parts.igem.org/Part:BBa_R0051">BBa_R0051</a></td>
                    </tr>

                </table>


                <div id="content1" class="yj">
                    ● Characterization of the Anderson Promoter

                </div>


                <div class="pb">
                    <br><br>
                    <span style="font-weight:900">
                        Why did the registry need new information about the Anderson
                        promoter in <i>Gluconacetobacter hansenii</i> ATCC 53582？
                    </span><br><br>

                    In previous studies concerning the Anderson promoter family, the biological chassis used by the iGEM
                    teams was mostly derived from <i>Escherichia coli</i>. Thanks to the well-studied physiology and
                    genetics of
                    this model bacterium, researchers can precisely control gene expression in such a traditional host
                    chassis.
                    <br><br>
                    While, in our project a <i>Gluconacetobacter</i> strain was selected as a bacterial chassis since it
                    is
                    a
                    potent producer of cellulose, a group of strong and ultrapure nano-sized biopolymers that are widely
                    used in several industrial domains, including biomedicine, food and textile. In order to optimize
                    bacterial cellulose production in <i>Gluconacetobacter</i>, the open-access constitutive Anderson
                    promoters are
                    employed to modulate the expression of key genes in the cellulose synthesis pathway.
                    <br><br>
                    Although the Anderson promoters have been well-studied and widely-used in <i>Escherichia coli</i>,
                    our
                    findings
                    in the literature revealed that the expression pattern in<i> Gluconacetobacter hansenii</i> ATCC
                    53582
                    is
                    completely different from that in <i> E. coli.</i> Hereby, we present the characterization of the
                    Anderson
                    promoter family in <i>G. hansenii</i> ATCC 53582, which could be a useful genetic tool in future
                    studies
                    on
                    bacterial cellulose film.
                </div>

                <div class="ej">

                    Abstract
                </div>
                <div class="pb">
                    Promoter is one of the major tools in synthetic biology, which can be manipulated to tune gene
                    expression. The strength of a promoter is normally dictated by its precise sequence. Min et al.[1]
                    investigated transcription performance of a reporter gene mRFP1 that was driven by 11 different
                    constitutive promoters in <i>G. hansenii</i> ATCC 53582, including the strongest member in the
                    family
                    J23119
                    from an open-access collection known as the Anderson promoter family. The variant promoter
                    J23119-A27T was
                    accidentally constructed during the cloning process and it differed from J23119 with only a single
                    nucleotide at the 27th position. The RBS and terminator in the testing platform were the BioBrick
                    parts
                    <a href="http://parts.igem.org/Part:BBa_B0034">BBa_B0034 </a>and <a
                        href="http://parts.igem.org/Part:BBa_B0015">BBa_B0015</a>
                    respectively.
                </div>
                <div style="display: flex;">
                    <img src="https://2021.igem.org/wiki/images/e/ec/T--SZPT-CHINA--contribution-pic-1.png"
                        style="margin-left: 50px;width: 500px;margin-top: 50px;float: left;">

                    <img src="https://2021.igem.org/wiki/images/8/85/T--SZPT-CHINA--contribution-pic-2.png"
                        style="margin-left: 50px;width: 500px;margin-top: 137px;float: left;margin-bottom: -15px;">

                </div>
                <div style="display: flex;">
                    <div style="float: left;margin-left: 247px;font-size: 200%;padding: 40px;">(a)</div>
                    <div style="float: left;margin-left: 456px;font-size: 200%;padding: 40px;">(b)</div>
                </div>

                <div class="tz">
                    Figure 1. (a) List of Anderson Promoters that were evaluated in this study.
                    <br>(b) A schematic depicting
                    the mRFP1 reporter assay used to determine the strength of each candidate promoter.
                </div>


                <div class="ej">

                    The expression characteristics of Anderson Promoters in <i>Gluconacetobacter hansenii </i>ATCC 53582
                </div>
                <div class="pb">
                    In the literature, the strength of each promoter, as quantified by the fluorescence intensity per
                    unit
                    OD<sub>600</sub>, was normalized to that of the J23119 construct. It is worth noting that these
                    promoters showed a
                    bimodal distribution (Figure 2). Among the tested promoters, J23100, J23119-A27T, J23104, J23102 and
                    J23119 are strong ones. J23119 is the strongest Anderson promoter in <i>E. coli.</i> but not in
                    <i>G.
                        hansenii</i>
                    ATCC 53582. Instead, J23100, J23119-A27T, J23104 and J23102 are consistently stronger than J23119.
                </div>

                <img src="https://2021.igem.org/wiki/images/5/57/T--SZPT-CHINA--contribution-pic-3.png"
                    style="margin-top: 100px;margin-left: 150px;">
                <div class="tz">
                    Figure 2. Strengths of the various Anderson Promoters in <i>Gluconacetobacter hansenii</i> ATCC
                    53582
                </div>
                <div class="pb">
                    Besides, the strength of a few Anderson promoters in either <i>E. coli </i>or <i>G. hansenii
                    </i>ATCC
                    53582 was
                    compared in the literature. In general, most promoters that are strong in <i>G. hansenii </i>ATCC
                    53582
                    also
                    tend to be strong in <i>E. coli </i>and vice versa. The promoter strength exhibit an apparent
                    bimodal
                    distribution pattern in <i>G. hansenii</i> ATCC 53582, whereas they appear to be more evenly
                    distributed
                    from 0
                    to 1 in <i>E. coli.</i>
                </div>


                <img src="https://2021.igem.org/wiki/images/7/7e/T--SZPT-CHINA--contribution-pic-4.png"
                    style="margin-top: 100px;margin-left: 350px;width: 400px;">
                <div class="tz">
                    Figure 3. Anderson promoter strengths in<i> E. coli </i>and <i>Gluconacetobacter hansenii </i>ATCC
                    53582. The data
                    for the various promoters were obtained from our mRFP1 reporter assay (Figure 2), while the data for
                    <i>E. coli</i> were obtained from <a
                        href="http://parts.igem.org/Promoters/Catalog/Anderson">http://parts.igem.org/Promoters/Catalog/Anderson</a>.
                </div>

                <div class="ej">

                    The influence of promoter strength on the sequence characteristics
                </div>
                <div class="pb">
                    By comparing the relationship between the strength and sequence characteristics of these 11
                    promoters
                    tested in <i>G. hansenii</i> ATCC 53582, we found an interesting correlation. Our data revealed that
                    the
                    first
                    3 bases of the promoter sequence (within the−35 box) have an important role in regulating gene
                    expression in the <i>Gluconacetobacter</i> genus. The nucleotides "T" (thymine) and "G" (guanine) at
                    position 1
                    and 3 respectively seem particularly crucial, as both of them are present in all the strong
                    promoters,
                    but absent in all the weak promoters.
                    <br><br>
                    For example, J23108 differs from J23119 by only one nucleotide at
                    the first position, but its promoter strength is significantly lower than that of J23119 in all the
                    three strains tested (P &lt; 0.001). Similarly, J23101 differs from J23119-A27T by only a single
                    nucleotide
                    at the third nucleotide position, but its promoter strength is at least 5-fold lower than that of
                    J23119-A27T. In contrast, several nucleotides in the -10 box (underlined in TA<ins>TAA</ins>T) can
                    be mutated
                    without causing a massive effect on the promoter strength.
                </div>

                <img src="https://2021.igem.org/wiki/images/5/55/T--SZPT-CHINA--contribution-pic-5.png"
                    style="margin-left: 225px;margin-top: 50px">


                <div class="tz">
                    Figure 4. List of Anderson promoter sequence that were evaluated in this study.
                </div>

                <div id="content2" class="yj">
                    ● Characterization of the pR Promoter

                </div>

                <br><br>
                <div class="pb">
                    The cI regulated promoter is based on the pR promoter <a
                        href="http://parts.igem.org/Part:BBa_R0051">(BBa_R0051)</a> from bacteriophage lambda. To
                    compare
                    the transcriptional strength between the pR promoter and a constitutive promoter J23100 <a
                        href="http://parts.igem.org/Part:BBa_J23100">(BBa_J23100)</a>,
                    two plasmids <i>E. coli-</i>DH5α-pR-B0034-sfGFP and <i>E. coli-</i>DH5α-J23100-B0034-sfGFP were
                    firstly
                    constructed,
                    and the reporter gene transcription (Superfolder GFP) controlled by either of two plasmids was
                    determined by measuring the average fluorescence intensity. To simplify the comparison, we set the
                    strength of J23100 promoter as 1 and normalized the strength of pR to J23100.
                </div>



                <img src="https://2021.igem.org/wiki/images/5/5b/T--SZPT-CHINA--contribution-pic-6.png"
                    style="margin-left: 350px;margin-top: 50px;width: 400px;">
                <div class="tz">
                    Figure 5. The average fluorescence intensity of the reporter controlled J23100 (<i>E.
                        coli-</i>DH5α-J23100-B0034-sfGFP) and pR (<i>E. coli-</i>DH5α-pR-B0034-sfGFP).
                </div>

                <div class="pb">
                    Excitation is induced at wavelength of 488 nm and the intensity of the emitted fluorescence of
                    wavelength at 520 nm is measured as a function of transcription strength. Fluorescence is calculated
                    by
                    the formula below, LB medium is set as the blank control. 
                </div>

                <img src="https://2021.igem.org/wiki/images/8/83/T--SZPT-CHINA--contribution-pic-10.png"
                    style="margin-left: 250px;margin-top: 50px;width: 600px;">


                <div class="ej">
                    Results

                </div>

                <br><br>
                <table border="1" style="font-size: 150%;text-align: center;margin-left: 150px;">
                    <tr>
                        <td style="width: 152px;display: table-cell;
                    vertical-align: middle;">S/N</td>
                        <td style="width: 190px;display: table-cell;
                    vertical-align: middle;">Promoter</td>
                        <td style="width: 240px;display: table-cell;
                    vertical-align: middle;">GFP fluorescence(a.u.)</td>
                        <td style="width: 240px;display: table-cell;
                    vertical-align: middle;">Proportion</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>J23100</td>
                        <td>23498.40742</td>
                        <td>1</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>pR</td>
                        <td>70580.24814</td>
                        <td>3.003618367</td>
                    </tr>

                </table>
                <div class="tz">
                    Figure 6. Fluorescence intensity of reporter gene driven by J23100 (<i>E.
                        coli-</i>DH5α-J23100-B0034-sfGFP) and
                    pR (<i>E. coli-</i>DH5α-pR-B0034-sfGFP).
                </div>

                <div class="pb">
                    As the figure shows, the expression strength of pR is 3.00 times to that of J23100.
                </div>


                <div id="content3" class="yj">
                    ● References

                </div>


                <div class="pb">
                    [1] Min Yan Teh, Kean Hean Ooi, Shun Xiang Danny Teo, et al. An Expanded Synthetic Biology Toolkit
                    for
                    Gene Expression Control in Acetobacteraceae [J]. ACS Synthetic Biology, 2019, 8(4): 708-723.
                </div>


            </div>
            <div id="red"
                style="float: left;margin-left: 140px; height: 10000px;width: 55px;background-color: #d44225;">
            </div>
        </div>
        <image src="https://2021.igem.org/wiki/images/8/8d/T--SZPT-CHINA--bottomPic.png" class="pic"
        style="margin-top: -372px;width: 1920px;"></image>

    </div>
</body>

<script>
    var bodyStyle = document.createElement('style')
    var docWidth, docHeight;
    var designWidth, designHeight;

    // 屏幕缩放实现
    function refreshScale() {
        bodyStyle.innerHTML = `body{width:${designWidth}px; height:${designHeight}px!important;}`
        document.documentElement.firstElementChild.appendChild(bodyStyle)
        document.getElementById('main').style = 'display:flex'
        //document.getElementsByClassName('mobile')[0].style = 'display:none'

        var widthRatio = docWidth / designWidth,
            heightRatio = docHeight / designHeight;
        var topRatio = 26 * heightRatio;
        //heightRatio=0.782222;
        //解决因transform导致margin-top
        document.getElementById('content').style =
            `transform:scale(${widthRatio},${heightRatio});transform-origin:left top;margin-top: -${topRatio}px;`;
        // 应对浏览器全屏切换前后窗口因短暂滚动条问题出现未占满情况
        setTimeout(function () {
            var lateWidth = document.documentElement.clientWidth,
                lateHeight = document.documentElement.clientHeight;
            if (lateWidth === docWidth) return;

            widthRatio = lateWidth / designWidth
            heightRatio = lateHeight / designHeight
            document.getElementById('content').style = "transform:scale(" + widthRatio + "," + heightRatio +
                ");transform-origin:left top;margin-top: -${topRatio}px;"
        }, 0)
    }

    // 清除scale
    function clearScale() {
        // 清除pc样式
        bodyStyle.innerHTML = ``
        document.documentElement.firstElementChild.appendChild(bodyStyle)
        document.body.style = "transform:none;transform-origin:none"
    }

    // 初始化
    function init() {
        // 获取当前屏幕可视区域大小
        docWidth = document.documentElement.clientWidth;
        docHeight = document.documentElement.clientHeight;
        // 判断是否是移动设备
        if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|Windows Phone/i.test(navigator.userAgent)) {

            // mobilePage();
            let mainClass = document.getElementById('main').classList;
            designWidth = 1920;
            designHeight = 3100;
            mainClass.add('pc');
            mainClass.remove('large');
            var value = document.getElementById('blue').getAttribute("style")
            value = value.replace(/10000/, "13500")
            $("#blue").attr("style", value);

            var value = document.getElementById('red').getAttribute("style")
            value = value.replace(/10000/, "13500")
            $("#red").attr("style", value);
              //手机适配目录
              var value = document.getElementById('dir1').getAttribute("style")
            value = value.replace(/9vh/, "3.5vh")
            $("#dir1").attr("style", value);
            //margin
            var value = document.getElementById('dir1').getAttribute("style")
            value = value.replace(/3vh/, "1vh")
            $("#dir1").attr("style", value);

            var value = document.getElementById('dir2').getAttribute("style")
            value = value.replace(/9vh/, "3vh")
            $("#dir2").attr("style", value);

            var value = document.getElementById('dir3').getAttribute("style")
            value = value.replace(/8vh/, "2vh")
            $("#dir3").attr("style", value);

        

            var value = document.getElementById('dir0p').getAttribute("style")
            value = value.replace(/1.8rem/, "1.3rem")
            $("#dir0p").attr("style", value);

            var value = document.getElementById('dir1p').getAttribute("style")
            value = value.replace(/1.2rem/, "0.9rem")
            $("#dir1p").attr("style", value);

            var value = document.getElementById('dir2p').getAttribute("style")
            value = value.replace(/1.2rem/, "0.9rem")
            $("#dir2p").attr("style", value);

            var value = document.getElementById('dir3p').getAttribute("style")
            value = value.replace(/1.2rem/, "0.9rem")
            $("#dir3p").attr("style", value);

            

            refreshScale()
        } else {
            //pc
            let mainClass = document.getElementById('main').classList;
            designWidth = 1920;
            designHeight = 980;
            mainClass.add('pc');
            mainClass.remove('large');
            refreshScale()

        }
    }

    // 大屏设置 rem 函数
    function setRem(designSize) {
        // 基准大小
        baseSize = 100;
        let basePc = baseSize / designSize; // 表示1680的设计图,使用100PX的默认值
        let vW = window.innerWidth; // 当前窗口的宽度

        let rem = vW * basePc; // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应font-size值
        document.documentElement.style.fontSize = rem + "px";
    }



    // 移动端页面
    function mobilePage() {
        clearScale()
        // 是移动设备 展示移动设备页
        //document.getElementById('main').style = 'display:none'
        //document.getElementsByClassName('mobile')[0].style = 'display:flex'
        // mobile 设置 rem 函数
        let designSize = 750;
        setRem(designSize);


    }

    // 初始化
    //init();

    // 监听前进/后退以及load事件触发
    window.addEventListener("pageshow", function (e) {
        if (e.persisted) { // 浏览器后退的时候重新计算
            init()
        }
    }, false);

    // 监听屏幕缩放
    window.addEventListener("resize", function () {
        init()
    }, false);
</script>
<!-- END-适配 -->





</html>